<template>
	<div class="channel" direction="vertical">
		<scOverview></scOverview>
		<div class="channel_body mt_10">
			<div class="performance">
				<scSection class="total-performance" title="总业绩数据" :img-url="imgsList.performance_icon">
					<div class="total-performance__body">
						<div class="total-performance-left">
							<div class="item">
								<div class="label">业绩(日)</div>
								<div class="value">
									<span class="number">3200</span>
									<span class="unit">元</span>
								</div>
							</div>
							<div class="item">
								<div class="label">业绩(月)</div>
								<div class="value">
									<span class="number">460000</span>
									<span class="unit">元</span>
								</div>
							</div>
						</div>
						<div class="total-performance-right">
							<scEcharts height="170px" :option="tplTotalPerformancePie"></scEcharts>
						</div>
					</div>
				</scSection>
				<scSection class="market-performance ml_10" title="销售业绩动态图" :img-url="imgsList.line_icon">
					<template #title-end>
						<scLegend :legendList="legendList"></scLegend>
					</template>
					<div class="market-performance__body">
						<div class="market-performance_tab">
							<scTab v-bind="performanceTabData" @onSelect="handlePerformance"></scTab>
						</div>
						<scEcharts height="150px" :option="tplMarketPerformanceLine"></scEcharts>
					</div>
				</scSection>
			</div>
			<div class="channel-performance mt_10">
				<scSection class="change flex-1" title="业绩渠道转化率" :img-url="imgsList.channel_icon">
					<template #title-end>
						<scLegend :legendList="legendChannelList"></scLegend>
					</template>
					<scEcharts height="180px" :option="tplChangeBar"></scEcharts>
				</scSection>
				<scSection class="first-sale flex-1 common ml_10" title="一销业绩数据" :img-url="imgsList.firstSale_icon">
					<template #title-end>
						<scLegend :legendList="legendDataList"></scLegend>
					</template>
					<div class="first-sale_body">
						<div class="first-sale-item">
							<scEcharts height="180px" :option="tplFirstSaleNumberLine"></scEcharts>
						</div>
						<div class="first-sale-item">
							<scEcharts height="180px" :option="tplFirstSalePerformanceLine"></scEcharts>
						</div>
					</div>
				</scSection>
				<scSection class="complete flex-1 ml_10" title="套餐人数完成情况" :img-url="imgsList.person_icon">
					<template #title-end>
						<scLegend :legendList="legendDataList"></scLegend>
					</template>
					<scEcharts height="180px" :option="tplCompleteNumberLine"></scEcharts>
				</scSection>
				<scSection class="complete flex-1 ml_10" title="套餐业绩完成情况" :img-url="imgsList.complete_icon">
					<template #title-end>
						<scLegend :legendList="legendDataList"></scLegend>
					</template>
					<scEcharts height="180px" :option="tplCompletePerformanceLine"></scEcharts>
				</scSection>
			</div>
			<div class="channel-section_bottom mt_10">
				<scSection class="performance-channel-analysis" title="业绩渠道分析" :img-url="imgsList.resource_icon">
					<template #title-end>
						<scLegend :legendList="legendChannelAnalysisList"></scLegend>
					</template>
					<div class="analysis-left">
						<scEcharts height="200px" :option="tplChannelAnalysisNumberBar"></scEcharts>
					</div>
					<div class="analysis-right">
						<scEcharts height="200px" :option="tplChannelAnalysisCompleteBar"></scEcharts>
					</div>
				</scSection>
				<scSection class="sales-ranking ml_10" title="销售排行榜" :img-url="imgsList.rank_icon">
					<div class="sales-ranking-title">
						<scTab v-bind="saleRankingTabData" @onSelect="handleSaleRanking"></scTab>
					</div>
					<div class="sales-ranking__body">
						<div class="sales-ranking-item">
							<div class="title">业绩排行榜</div>

							<div class="sales-ranking-wrapper">
								<div class="sales-ranking-table">
									<scResourceTable v-bind="tplTableData">
										<template v-slot:url>
											<img class="table-img" :src="imgsList.consult_icon" alt="" />
										</template>
									</scResourceTable>
								</div>
							</div>
						</div>
						<div class="sales-ranking-item">
							<div class="title">业绩达标率排行榜</div>

							<div class="sales-ranking-wrapper">
								<div class="sales-ranking-table">
									<scResourceTable v-bind="tplTableData">
										<template v-slot:url>
											<img class="table-img" :src="imgsList.consult_icon" alt="" />
										</template>
									</scResourceTable>
								</div>
							</div>
						</div>
					</div>
				</scSection>
			</div>
		</div>
	</div>
</template>
<script setup>
import { reactive, computed } from "vue"
import scOverview from "@/components/scOverview"
import scSection from "@/components/scSection"
import scLegend from "@/components/scLegend"
import scTab from "@/components/scTab"
import scEcharts from "@/components/scEcharts"
import scResourceTable from "@/components/scResourceTable"
import imgsList from "@/utils/images.js"

const legendList = reactive([
	{ label: "总业绩", color: "#FF7070" },
	{ label: "一销", color: "#1DC9B7" },
	{ label: "套餐", color: "#506EE4" }
])

const legendChannelList = reactive([{ label: "完成", color: "#FF7070" }])
const legendDataList = reactive([
	{ label: "目标", color: "#506EE4" },
	{ label: "完成", color: "#FF7070" }
])
const legendChannelAnalysisList = reactive([
	{ label: "团购", color: "#506EE4", width: "10px" },
	{ label: "网络", color: "#FF7070", width: "10px" },
	{ label: "自到校", color: "#1DC9B7", width: "10px" },
	{ label: "实操地推", color: "#FF7070", type: "round" }
])

const performanceTabData = reactive({
	active: "month",
	items: [
		{ label: "月度动态", name: "month" },
		{ label: "年度动态", name: "year" }
	]
})

const saleRankingTabData = reactive({
	active: "day",
	items: [
		{ label: "日排名", name: "day" },
		{ label: "周排名", name: "week" },
		{ label: "月排名", name: "month" },
		{ label: "年排名", name: "year" }
	]
})

// 总业绩数据-年度业绩
const tplTotalPerformancePie = computed(() => {
	const options = {
		color: ["#FF7070", "#506EE4", "#1DC9B7"],
		title: {
			show: true,
			x: "48%",
			y: "2%",
			text: "年度业绩(元)",
			textStyle: {
				color: "#333333",
				fontWeight: "bold",
				fontSize: 14
			},
			subtext: "￥19000000",
			subtextStyle: {
				color: "#F05A5A",
				fontWeight: "normal",
				fontSize: 20
			}
		},
		tooltip: {
			trigger: "item"
		},
		legend: {
			orient: "vertical",
			icon: "circle",
			top: "45%",
			left: "48%"
		},
		series: [
			{
				name: "年度业绩",
				type: "pie",
				radius: "70%",
				center: ["24%", "50%"],
				labelLine: { show: false },
				label: { show: false },
				itemStyle: {
					borderWidth: 1,
					borderColor: "#fff"
				},
				data: [
					{ value: 1048, name: "一销" },
					{ value: 735, name: "套餐" },
					{ value: 580, name: "其他" }
				]
			}
		]
	}
	return options
})
// 销售业绩动态图
const tplMarketPerformanceLine = computed(() => {
	const options = {
		color: ["#FF7070", "#1DC9B7", "#506EE4"],
		tooltip: {
			trigger: "axis",
			borderColor: "#FF7070",
			formatter: (params) => {
				let result = `${params[0].name}${performanceTabData.active === "day" ? "日" : "月份"}<br>`
				params.forEach((item) => {
					result += `${item.marker} ${item.seriesName} : ${item.value ?? "-"}</br>`
				})
				return result
			}
		},
		grid: {
			left: "2%",
			right: "2%",
			bottom: "6%",
			top: "10%",
			containLabel: true
		},
		xAxis: {
			type: "category",
			boundaryGap: false,
			axisLabel: {
				color: "#666666",
				fontSize: "12px"
			},
			data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30]
		},
		yAxis: {
			type: "value",
			axisLabel: {
				color: "#666666",
				fontSize: "10px"
			}
		},
		series: [
			{
				name: "总业绩",
				data: [150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 10, 30, 150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 10, 30, 150, 230, 224, 218, 135, 100],
				type: "line",
				smooth: true,
				showSymbol: false,
				lineStyle: {
					width: 3 //折线宽度
				}
			},
			{
				name: "一销",
				data: [150, 230, 224, 218, 135, 147, 260, 218, 135, 147, 100, 110, 150, 230, 224, 10, 30, 15, 150, 230, 224, 10, 30, 15, 150, 230, 224, 218, 135, 147],
				type: "line",
				smooth: true,
				showSymbol: false,
				lineStyle: {
					width: 3 //折线宽度
				}
			},
			{
				name: "套餐",
				data: [150, 230, 224, 218, 135, 147, 260, 218, 135, 147, 100, 110, 218, 135, 147, 100, 110, 150, 230, 224, 10, 30, 15, 150, 230, 224, 10, 30, 15, 200],
				type: "line",
				smooth: true,
				showSymbol: false,
				lineStyle: {
					width: 3 //折线宽度
				}
			}
		]
	}
	return options
})

// 业绩渠道转化率
const tplChangeBar = computed(() => {
	const options = {
		grid: {
			left: "8%",
			right: "15%",
			bottom: "0%",
			top: "10%",
			containLabel: true
		},
		xAxis: {
			type: "value",
			show: false
		},
		yAxis: [
			{
				type: "category",
				inverse: true,
				data: ["团购", "网络", "自到校", "实操地推"],
				offset: 8,
				nameTextStyle: {
					fontSize: 15
				},
				axisLine: {
					show: true,
					lineStyle: {
						width: 1,
						type: "solid"
					}
				}
			}
		],

		series: [
			{
				type: "bar",
				barWidth: 14,
				showBackground: true,
				backgroundStyle: {
					borderRadius: 7,
					color: "#EEEEEE"
				},
				itemStyle: {
					borderRadius: 7,
					color: "#FF7070"
				},

				label: {
					show: true,
					position: "right",
					valueAnimation: true,
					color: "#666",
					fontSize: 12,
					formatter(payload) {
						return `${payload.value}%`
					}
				},

				data: [5, 20, 36, 10]
			}
		]
	}
	return options
})
// 一销人数完成情况
const tplFirstSaleNumberLine = computed(() => {
	const options = {
		tooltip: {
			trigger: "axis",
			borderColor: "#FF7070", // 修改字体颜色
			formatter: (params) => {
				let result = `${params[0].name}<br>`
				params.forEach((item) => {
					result += `${item.marker} ${item.seriesName} : ${item.value ?? "-"}</br>`
				})
				return result
			}
		},

		grid: {
			left: "8%",
			right: "8%",
			bottom: "6%",
			top: "20%",
			containLabel: true
		},
		xAxis: {
			type: "category",
			axisLabel: {
				color: " #333333",
				fontSize: "12px",
				fontWeight: "bold"
			},
			data: ["单科", "多科"]
		},
		yAxis: {
			type: "value",
			name: "一销人数完成情况",
			nameTextStyle: {
				padding: [0, 0, 0, 55],
				color: "#666"
			}
		},
		series: [
			{
				name: "目标",
				data: [15, 23],
				type: "bar",
				barWidth: 16,
				itemStyle: {
					borderRadius: 8,
					color: "#506EE4"
				}
			},
			{
				name: "完成",
				data: [22, 21],
				type: "bar",
				barWidth: 16,
				itemStyle: {
					borderRadius: 8,
					color: "#FF7070"
				}
			}
		]
	}
	return options
})
// 一销业绩完成情况
const tplFirstSalePerformanceLine = computed(() => {
	const options = {
		tooltip: {
			trigger: "axis",
			borderColor: "#FF7070", // 修改字体颜色
			formatter: (params) => {
				let result = `${params[0].name}<br>`
				params.forEach((item) => {
					result += `${item.marker} ${item.seriesName} : ${item.value ?? "-"}</br>`
				})
				return result
			}
		},

		grid: {
			left: "8%",
			right: "8%",
			bottom: "6%",
			top: "20%",
			containLabel: true
		},
		xAxis: {
			type: "category",
			axisLabel: {
				color: " #333333",
				fontSize: "12px",
				fontWeight: "bold"
			},
			data: ["单科", "多科"]
		},
		yAxis: {
			type: "value",
			name: "一销业绩完成情况",
			nameTextStyle: {
				padding: [0, 0, 0, 55],
				color: "#666"
			}
		},
		series: [
			{
				name: "目标",
				data: [15, 23],
				type: "bar",
				barWidth: 16,
				itemStyle: {
					borderRadius: 8,
					color: "#506EE4"
				}
			},
			{
				name: "完成",
				data: [22, 21],
				type: "bar",
				barWidth: 16,
				itemStyle: {
					borderRadius: 8,
					color: "#FF7070"
				}
			}
		]
	}
	return options
})

// 套餐人数完成情况
const tplCompleteNumberLine = computed(() => {
	const options = {
		color: ["#506EE4", "#FF7070"],
		tooltip: {
			trigger: "axis",
			borderColor: "#FF7070", // 修改字体颜色
			formatter: (params) => {
				let result = `${params[0].name}<br>`
				params.forEach((item) => {
					result += `${item.marker} ${item.seriesName} : ${item.value ?? "-"}</br>`
				})
				return result
			}
		},
		grid: {
			left: "4%",
			right: "6%",
			bottom: "0%",
			top: "14%",
			containLabel: true
		},
		xAxis: {
			type: "category",
			axisLabel: {
				rotate: 45,
				color: "#50576A",
				fontSize: "10px"
			},

			data: ["11800套餐", "18800套餐", "28800套餐", "29800套餐", "59800套餐", "学历教育", "代理商", "四轮驱动"]
		},
		yAxis: {
			type: "value",
			axisLabel: {
				color: "#666666",
				fontSize: "10px"
			}
		},
		series: [
			{
				name: "目标",
				data: [30, 15, 150, 230, 224, 218, 135, 147],
				type: "line",
				smooth: true,
				symbolSize: 1,
				areaStyle: { color: "#c8d3f5" },
				lineStyle: {
					width: 3
				},
				itemStyle: {
					label: { show: true }
				}
			},
			{
				name: "完成",
				data: [150, 230, 224, 218, 135, 147, 260, 150],
				type: "line",
				smooth: true,
				symbolSize: 1,
				areaStyle: { color: "#ffd3d4" },
				lineStyle: {
					width: 3
				},
				itemStyle: {
					label: { show: true }
				}
			}
		]
	}
	return options
})

// 套餐业绩完成情况
const tplCompletePerformanceLine = computed(() => {
	const options = {
		color: ["#506EE4", "#FF7070"],
		tooltip: {
			trigger: "axis",
			borderColor: "#FF7070", // 修改字体颜色
			formatter: (params) => {
				let result = `${params[0].name}<br>`
				params.forEach((item) => {
					result += `${item.marker} ${item.seriesName} : ${item.value ?? "-"}</br>`
				})
				return result
			}
		},
		grid: {
			left: "4%",
			right: "6%",
			bottom: "0%",
			top: "14%",
			containLabel: true
		},
		xAxis: {
			type: "category",
			axisLabel: {
				rotate: 45,
				color: "#50576A",
				fontSize: "10px"
			},

			data: ["11800套餐", "18800套餐", "28800套餐", "29800套餐", "59800套餐", "学历教育", "代理商", "四轮驱动"]
		},
		yAxis: {
			type: "value",
			axisLabel: {
				color: "#666666",
				fontSize: "10px"
			}
		},
		series: [
			{
				name: "目标",
				data: [30, 15, 150, 230, 224, 218, 135, 147],
				type: "line",
				smooth: true,
				symbolSize: 1,
				areaStyle: { color: "#c8d3f5" },
				lineStyle: {
					width: 3
				},
				itemStyle: {
					label: { show: true }
				}
			},
			{
				name: "完成",
				data: [150, 230, 224, 218, 135, 147, 260, 150],
				type: "line",
				smooth: true,
				symbolSize: 1,
				areaStyle: { color: "#ffd3d4" },
				lineStyle: {
					width: 3
				},
				itemStyle: {
					label: { show: true }
				}
			}
		]
	}
	return options
})

// 业绩渠道分析
const tplChannelAnalysisNumberBar = computed(() => {
	const options = {
		color: ["#506EE4", "#FF7070", "#1DC9B7", "#FF7070"],
		tooltip: {
			trigger: "axis",
			borderColor: "#FF7070", // 修改字体颜色
			formatter: (params) => {
				let result = `${params[0].name}<br>`
				params.forEach((item) => {
					result += `${item.marker} ${item.seriesName} : ${item.value ?? "-"}</br>`
				})
				return result
			}
		},
		grid: {
			left: "4%",
			right: "6%",
			bottom: "6%",
			top: "18%",
			containLabel: true
		},
		xAxis: {
			type: "category",
			axisLabel: {
				color: "#50576A",
				fontSize: "12px"
			},

			data: ["资源数", "到校人数", "成交人数", "全款人数", "预定人数"]
		},
		yAxis: {
			type: "value",
			axisLabel: {
				color: "#666666",
				fontSize: "10px"
			}
		},
		series: [
			{
				name: "团购",
				data: [30, 15, 150, 230, 224],
				type: "bar",
				barWidth: 10,
				itemStyle: {
					borderRadius: [5, 5, 0, 0]
				}
			},
			{
				name: "网络",
				data: [150, 230, 224, 218, 135],
				type: "bar",
				barWidth: 10,
				itemStyle: {
					borderRadius: [5, 5, 0, 0]
				}
			},
			{
				name: "自到校",
				data: [30, 15, 150, 230, 224],
				type: "bar",
				barWidth: 10,
				itemStyle: {
					borderRadius: [5, 5, 0, 0]
				}
			},
			{
				name: "实操地推",
				data: [150, 230, 224, 218, 135],
				type: "line",
				smooth: true,
				symbolSize: 8,
				lineStyle: {
					width: 3
				}
			}
		]
	}
	return options
})

const tplChannelAnalysisCompleteBar = computed(() => {
	const options = {
		color: ["#506EE4", "#FF7070", "#1DC9B7", "#FF7070"],
		tooltip: {
			trigger: "axis",
			borderColor: "#FF7070", // 修改字体颜色
			formatter: (params) => {
				let result = `${params[0].name}<br>`
				params.forEach((item) => {
					result += `${item.marker} ${item.seriesName} : ${item.value ?? "-"}</br>`
				})
				return result
			}
		},
		grid: {
			left: "4%",
			right: "6%",
			bottom: "6%",
			top: "18%",
			containLabel: true
		},
		xAxis: {
			type: "category",
			axisLabel: {
				color: "#50576A",
				fontSize: "12px"
			},

			data: ["成交业绩", "全款业绩", "预定业绩"]
		},
		yAxis: {
			type: "value",
			axisLabel: {
				color: "#666666",
				fontSize: "10px"
			}
		},
		series: [
			{
				name: "团购",
				data: [30, 15, 150],
				type: "bar",
				barWidth: 10,
				itemStyle: {
					borderRadius: [5, 5, 0, 0]
				}
			},
			{
				name: "网络",
				data: [150, 230, 224],
				type: "bar",
				barWidth: 10,
				itemStyle: {
					borderRadius: [5, 5, 0, 0]
				}
			},
			{
				name: "自到校",
				data: [30, 15, 150],
				type: "bar",
				barWidth: 10,
				itemStyle: {
					borderRadius: [5, 5, 0, 0]
				}
			},
			{
				name: "实操地推",
				data: [150, 230, 224],
				type: "line",
				smooth: true,
				symbolSize: 8,
				lineStyle: {
					width: 3
				}
			}
		]
	}
	return options
})

const tplTableData = computed(() => {
	const columns = [
		{ type: "index", label: "排名", className: "indexClass" },
		{ prop: "url", label: "头像" },
		{ prop: "name", label: "姓名", className: "nameClass" },
		{ prop: "number", label: "数量", className: "numberClass" },
		{ prop: "pre", label: "百分比" }
	]
	return {
		columns,
		showheader: false,
		tableData: Array(100)
			.fill(0)
			.map((_, i) => {
				return {
					url: "12212",
					name: `张珊${i}`,
					number: i * 100,
					pre: `${i + 1}%`
				}
			})
	}
})

const handlePerformance = (payload) => {
	performanceTabData.active = payload.name
}

const handleSaleRanking = (payload) => {
	saleRankingTabData.active = payload.name
}
</script>
<style lang="scss">
.channel {
	padding: 15px;
	min-width: 1400px;
	.mt_10 {
		margin-top: 10px;
	}
	.mt_10 {
		margin-top: 10px;
	}
	.ml_10 {
		margin-left: 10px;
	}
	img {
		width: 100%;
		height: 100%;
		display: block;
	}
	.channel_body {
		width: 100%;
	}
	.performance {
		display: flex;
		.total-performance {
			width: 40%;
			height: 240px;
			.total-performance__body {
				height: 100%;
				padding: 14px 0px;
				display: flex;

				.total-performance-left {
					height: 100%;
					padding: 20px 0px 20px 20px;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					min-width: 230px;
					flex: 1;
					.item {
						display: flex;
						font-size: 14px;
						align-items: center;
						.label {
							font-weight: bold;
							color: #333333;
						}
						.number {
							font-size: 30px;
							font-family: Vrinda;
							font-weight: 400;
							color: #f05a5a;
							margin: 0px 4px 0px 10px;
						}
						.unit {
							color: #999999;
						}
					}
				}
				.total-performance-right {
					flex: 1;
				}
			}
		}
		.market-performance {
			width: 60%;
			.market-performance_tab {
				display: flex;
				justify-content: flex-end;
				padding: 10px 10px 0px 0px;
			}
		}
	}
	.channel-performance {
		display: flex;
		.flex-1 {
			flex: 1;
		}
		.change {
			min-width: 260px;
			max-width: 310px;
		}
		.first-sale {
			width: 460px;
			min-width: 400px;
			.first-sale_body {
				display: flex;
				.first-sale-item {
					width: 50%;
				}
			}
		}
		.complete {
			min-width: 340px;
			max-width: 410px;
		}
	}
	.channel-section_bottom {
		display: flex;
		.performance-channel-analysis {
			width: 45%;
			.app-section__body {
				display: flex;
			}
			.analysis-left {
				width: 55%;
			}
			.analysis-right {
				width: 45%;
			}
		}
		.sales-ranking {
			width: 55%;

			.sales-ranking-title {
				height: 37px;
				border-bottom: 1px solid #dbdde4;
				display: flex;
				align-items: center;
			}
			.sales-ranking__body {
				display: flex;
			}
			.sales-ranking-item {
				width: 50%;
				.title {
					height: 38px;
					line-height: 38px;
					padding-right: 20px;
					text-align: right;
					font-size: 16px;
					color: #666;
				}
			}
			.sales-ranking-wrapper {
				padding: 0px 20px;
				.sales-ranking-table {
					height: 115px;
					overflow-y: auto;
					&::-webkit-scrollbar {
						width: 5px;
					}
					/*定义滚动条轨道内阴影+圆角*/
					&::-webkit-scrollbar-track {
						border-radius: 10px;
						background: #ddd;
						width: 1px;
					}
					/*定义滑块内阴影+圆角*/
					&::-webkit-scrollbar-thumb {
						border-radius: 10px;
						background-color: #ff7070;
						width: 5px;
					}

					.el-table--default .el-table__cell {
						padding: 3px 0px;
					}
					.table-img {
						width: 32px;
						height: 32px;
						border-radius: 50%;
					}
					.indexClass {
						font-size: 16px;
						font-weight: 500;
						color: #666666;
					}
					.nameClass {
						font-size: 14px;
						font-weight: 800;
						color: #333333;
					}
					.numberClass {
						font-size: 16px;
						font-weight: 800;
						color: #f05a5a;
					}
				}
			}
		}
	}
}
</style>
